<template>
    <div class="flex flex-col justify-center items-center p-4">
        <el-form ref="formRef" :model="form" :rules="rules" class="demo-ruleForm w-3/5">
            <el-form-item label="登录账号">
                <!-- <el-input v-model="form.loginName" disabled /> -->
                <el-text class="mx-1">{{ form.loginName }}</el-text>
            </el-form-item>
            <el-form-item label="用户名称">
                <el-input v-model="form.userName" clearable />
            </el-form-item>
            <el-form-item label="用户昵称">
                <el-input v-model="form.nickName" clearable />
            </el-form-item>
            <el-form-item label="联系方式" prop="userTele">
                <el-input v-model="form.userTele" clearable />
            </el-form-item>
            <el-form-item label="用户头像">
                <!-- <el-input v-model="form.avatar" clearable />
                <el-avatar :size="50" :src="form.avatar" />  -->
                <el-upload class="avatar-uploader" action="/api/upload/uploadAvatar" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <el-avatar :size="50" v-if="form.avatar" :src="form.avatar" />
                    <!-- <img v-if="form.avatar" :src="form.avatar" class="avatar" /> -->
                    <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
                    <el-avatar :size="50" v-else
                        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                </el-upload>
            </el-form-item>
            <el-form-item label="性别">
                <!-- <el-input v-model="form.sex" clearable /> -->
                <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option label="未知" value="未知" />
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                </el-select>
            </el-form-item>
        </el-form>
        <el-button class="w-2/5 text-white" type="primary" :color="themeStore.themeColor" :dark="themeStore.dark"
            @click="submitForm(formRef)">更新</el-button>
    </div>
</template>


<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import { getUserInfo, setUserInfo } from '@/config/api';

import { useRouter } from 'vue-router';
const router = useRouter();
import { userStore, themeColorStore } from '@/stores'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = userStore()
const themeStore = themeColorStore()

const getUser = () =>{
    getUserInfo().then(res =>{
        form.value=res.data
        store.login(res.data)
    })
}

getUser();

const form = ref({
    loginName: '',
    userTele: '',
    userName: '',
    nickName: '',
    avatar: '',
    sex: ''
})
const formRef = ref(null)

const rules = ref({
    loginName: [
        { required: true, message: '登录账号不能为空', trigger: 'blur' },
        { min:5, max: 20, message: '请输入正确的位数', trigger: 'blur' },
    ],
    userTele: [
        { required: true, message: '用户手机号不能为空', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入正确的位数', trigger: 'blur' },
    ]
})
const submitForm = (formRef) => {
    if (!formRef) return
    formRef.validate((valid) => {
        if (valid) {
            setUserInfo(form.value).then(res => {
                if(res.code == 200){
                    ElMessage.success(res.msg)
                }
                else{
                    ElMessage.error(res.msg)
                }
            })
        } else {
            ElMessage.error('表单校验未通过')
        }
    })
}

const handleAvatarSuccess = (res, uploadFile) => {
    if(res.code == 200){
        form.value.avatar = res.data.url
    }
    else{
        ElMessage.error('上传失败')
    }
}
</script>


<style scoped>

</style>